<template>
	<view>
		<view class="status_bar"></view>
		
		<view class="top" @click="toUserInfo">
			<image class="avatar" :src="user.pic" mode="aspectFill"></image>
			<view class="content">
				<view class="uni-flex uni-row">
					<text class="nick">{{user.nick}}</text>
				</view>
				<view>
					<text class="userCode">ID:{{user.usercode}}</text>
				</view>
			</view>
			<zy-arrow-right></zy-arrow-right>
		</view>

		<view class="vip" v-if="!online">
			<image :src="getImageUrl('ic_mine_vip.png')" style="width: 40rpx; height: 40rpx;"></image>
			<view class="text">{{vip.text}}</view>
			<view class="btn" @click="toVip">{{vip.btn}}</view>
			<image :src="getImageUrl('ic_mine_arrow.png')" style="width: 30rpx; height: 30rpx;"></image>
		</view>
		
		<cell-item label="实名认证" :icon="getImageUrl('ic_mine_realname.png')" @click.native="toRealName"></cell-item>
		<cell-item label="在线客服" :icon="getImageUrl('ic_mine_customer_service.png')" @click.native="onService"></cell-item>
		<cell-item label="设置" :icon="getImageUrl('ic_mine_set.png')" @click.native="toSetting"></cell-item>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				online: uni.$online,
				user: {},
				vip: {
					text: '开通VIP|享文字免费畅聊',
					btn: '立即开通'
				}
			}
		},
		onShow() {
			this.requestUser();
		},
		methods: {
			toUserInfo() {
				uni.navigateTo({
					url: '/main/user/info/info?txCode=' + uni.getStorageSync('userId')
				})
			},
			toVip() {
				uni.navigateTo({
					url: '/main/mine/vip/vip'
				})
			},
			toRealName() {
				uni.navigateTo({
					url: '/main/mine/realname/realname'
				})
			},
			onService() {
				uni.showModal({
					title: '客服',
					content: `客服QQ：2471997595 工作时间9：00-18：00`
				})
			},
			toSetting() {
				uni.navigateTo({
					url: '/main/mine/setting/setting'
				})
			},


			//以下为接口
			async requestUser() {
				let res = await this.$common.post('/app/usermessage/getMessage');
				if (0 == res.code) {
					this.user = res.data;
					if (1 == res.data.vipMap.isVip) {
						this.vip.text = '已开通VIP ' + res.data.vipMap.vipEndDate + '到期';
						this.vip.btn = '立即续费';
						uni.setStorageSync('vip', true)
					} else {
						this.vip.text = '开通VIP|享文字免费畅聊';
						this.vip.btn = '立即开通';
						uni.setStorageSync('vip', false)
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
		}
	}
</script>



<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: white;
		padding: 20rpx;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}

		.content {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin-left: 20rpx;

			.nick {
				font-size: 36rpx;
				color: #222;
			}

			.userCode {
				font-size: 20rpx;
				color: #666;
				padding: 2rpx 10rpx;
				margin-top: 10rpx;
				border-radius: 100rpx;
				background-color: #f0f0f0;
			}
		}
	}

	.vip {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100wh;
		height: 100rpx;
		margin: 30rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		background-image: linear-gradient(to right, #5A5B7F, #35385B);
		padding: 0 15rpx;

		font-size: 24rpx;
		color: #F7F1DD;

		.text {
			flex: 1;
			margin: 0 15rpx;
		}

		.btn {
			font-size: 28rpx;
			color: #F2B77A;
			margin: auto 15rpx;
			padding: 30rpx 0;
		}
	}

	.cell {
		display: flex;
		flex: 1;
		padding: 20rpx;

		.label {
			flex: 1;
			font-size: 30rpx;
			color: #222;
			margin-left: 20rpx;
		}
	}
</style>